<template>
  <div class="classroom">
    <el-row type="flex" :gutter="20" align="middle">
      <el-col :span="4">
        <el-select v-model="query.areaCode" placeholder="请选择单位所属区域">
          <el-option
            v-for="item in regionList"
            :key="item.areaCode"
            :label="item.areaName"
            :value="item.areaCode"
          >
          </el-option> </el-select
      ></el-col>

      <el-col :span="4">
        <el-select
          v-model="query.businessStatus"
          placeholder="请选择业务状态"
          clearable
        >
          <el-option
            v-for="item in [
              {
                code: '0',
                label: '申请受理',
              },
              {
                code: '1',
                label: '受理制卡',
              },
              {
                code: '2',
                label: '快递发货',
              },
              {
                code: '3',
                label: '收货完成',
              },
              {
                code: '4',
                label: '拒绝受理',
              },
            ]"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          >
          </el-option> </el-select
      ></el-col>

      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.courierNumber"
          placeholder="请输入快递单号"
        ></el-input>
      </el-col>
      
      <el-col :span="6">
        <el-input
          maxlength="50"
          clearable
          v-model="query.unitName"
          placeholder="请输入单位名称"
          @keyup.enter.native="getList()"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="
            query.pageIndex = 1;
            getList();
          "
          >查询</el-button
        ></el-col
      >
      <el-col :span="2">
        <el-button
          @click="
            query.pageIndex = 1;
            exportList();
          "
          >导出</el-button
        ></el-col
      >
        <el-col :span="2">
        <el-button
          @click="
            query.pageIndex = 1;
            exportList1();
          "
          >导出打印</el-button
        ></el-col
      >
    </el-row>

    <rz-height></rz-height>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="createDateTimeStr"
        label="申请日期"
        width="120"
      ></el-table-column>

      <el-table-column prop="unitName" label="单位名称" width="300">
        <template slot-scope="scope">
          {{ scope.row.operatorName || scope.row.unitName }}
        </template>
      </el-table-column>

      <el-table-column
        prop="receivingContactorAndTel"
        label="收货人信息"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="receivingContactorAndTel"
        label="收货地址"
        width="300"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.receivingAddress }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="businessStatusStr" label="业务状态" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.businessStatus == '0'" class="red">申请受理</div>
          <div v-else-if="scope.row.businessStatus == '1'" >
            受理制卡
          </div>
          <div
            v-else-if="scope.row.businessStatus == '2'"
            style="color: orange"
          >
            快递发货
          </div>
          <div v-else-if="scope.row.businessStatus == '3'" class="green">
            收货完成
          </div>
          <div v-else-if="scope.row.businessStatus == '4'" class="red">
            拒绝受理
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="" label="区域街道" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.districtName }}-{{ scope.row.streetName }}</div>
        </template>
      </el-table-column> -->

      <!-- <el-table-column
        prop="identify"
        label="统一社会信用代码"
        width="180"
      ></el-table-column>
      <el-table-column prop="newLicenseNo" label="许可证" width="180">
        <template slot-scope="scope">
          {{ scope.row.newLicenseNo || "--" }}
        </template>
      </el-table-column> -->

      <el-table-column
        prop="acceptanceDateStr"
        label="受理/拒绝日期"
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.acceptanceDateStr || "--" }}
        </template>
      </el-table-column>

      <!-- 
      <el-table-column prop="courierNumber" label="快递单号" width="120">
        <template slot-scope="scope">
          {{ scope.row.courierNumber || "--" }}
        </template>
      </el-table-column> -->
      <el-table-column prop="deliverGoodsDateStr" label="发货日期" width="220">
        <template slot-scope="scope">
          {{ scope.row.deliverGoodsDateStr || "--" }}
          {{
            scope.row.courierNumber ? "(" + scope.row.courierNumber + ")" : ""
          }}
        </template>
      </el-table-column>

      <el-table-column prop="reasonRejection" label="拒绝原因" width="180">
        <template slot-scope="scope">
          {{ scope.row.reasonRejection || "--" }}
        </template>
      </el-table-column>

      <el-table-column prop="" label="操作" width="240" fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.businessStatus == '0'">
            <el-button size="mini" @click="view(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="view(scope.row, 1)"
              >受理</el-button
            >
            <el-button type="danger" size="mini" @click="view(scope.row, 4)"
              >拒绝</el-button
            >
          </div>
          <div v-else-if="scope.row.businessStatus == '1'">
            <el-button size="mini" @click="view(scope.row)">查看</el-button>
            <el-button type="primary" size="mini" @click="view(scope.row, 2)"
              >发货</el-button
            >
          </div>
          <div v-else-if="scope.row.businessStatus == '2'">
            <el-button size="mini" @click="view(scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="view(scope.row,3)">收货</el-button>
          </div>
          <div v-else-if="scope.row.businessStatus == '3'">
            <el-button size="mini" @click="view(scope.row)">查看</el-button>
          </div>
          <div v-else-if="scope.row.businessStatus == '4'">
            <el-button size="mini" @click="view(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="query.pageIndex"
      @pagination="getList"
      v-show="total"
    />

    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <el-form ref="form" :model="sendData" label-width="150px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请日期">
              {{ data.createDateTimeStr }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务状态">
              {{ data.businessStatusStr }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="区域街道">
              {{ data.districtName }}-{{ data.streetName }}
            </el-form-item>
          </el-col> -->
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码">
              {{ data.identify }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="许可证号">
              {{ data.newLicenseNo }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单位名称">
              {{ data.unitName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人信息">
              {{ data.receivingContactorAndTel }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="收货人地址">
              {{ data.receivingAddress }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item
              :label="data.businessStatus == 4 ? '拒绝日期' : '受理日期'"
            >
              {{ data.acceptanceDateStr }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="data.businessStatus == 4 ? '拒绝人' : '受理人'"
            >
              1212
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发货日期">
              {{ data.deliverGoodsDateStr || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递单号">
              {{ data.courierNumber || "--" }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="data.businessStatus == 4">
          <el-col :span="12">
            <el-form-item label="拒绝原因">
              {{ data.reasonRejection }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="sendData.businessStatus == 4">
          <el-col :span="12">
            <el-form-item label="拒绝原因" prop="reasonRejection">
              <el-input
                type="textarea"
                clearable
                v-model="sendData.reasonRejection"
                placeholder="请输入拒绝原因"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="sendData.businessStatus == 2">
          <el-col :span="12">
            <el-form-item label="快递单号" prop="courierNumber">
              <el-input
                v-model="sendData.courierNumber"
                placeholder="请输入快递单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发货日期">
              <el-date-picker
                v-model="sendData.deliverGoodsDate"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="受理日期">
              {{ data.identify }}
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="12">
            <el-form-item label="申请制卡图"> 
                <el-image 
    style="width: 300px;"
    :src="data.qrCodeUrl" 
    :preview-src-list="[data.qrCodeUrl]">
  </el-image>
              
               </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理流程">
              <div
                style="height: 300px;"
                v-if="data.businessStatus !== 4"
              >
                <el-steps direction="vertical" :active="active">
                  <el-step description="申请正在受理中，请耐心等待 "></el-step>
                  <el-step description="申请已受理，正在制作中 "></el-step>
                  <el-step :description="`您的食安图已发货，订单号：${data.courierNumber} 请保持电话畅通`" ></el-step>
                  <el-step description="您的食安图已签收"></el-step>
                </el-steps>
              </div>
              <div  style="height: 300px;" v-if="data.businessStatus == 4">
                <el-steps direction="vertical" :active="2">
                  <el-step description="申请正在受理中，请耐心等待 "></el-step>
                  <el-step description="拒绝受理" status="error"></el-step>
             
                </el-steps>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button
          v-if="sendData.businessStatus == 1"
          type="primary"
          @click="acceptance"
          >受理制卡</el-button
        >
        <el-button
          v-if="sendData.businessStatus == 2"
          type="primary"
          @click="acceptance"
          >发货</el-button
        >
           <el-button
          v-if="sendData.businessStatus == 3"
          type="primary"
          @click="acceptance"
          >收货</el-button
        >
        <el-button
          v-if="sendData.businessStatus == 4"
          type="danger"
          @click="acceptance"
          >拒绝</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from "vue-qr";
import { bodyIndustryOptions } from "@/utils/configure";
import {
  FindClaimMapList,
  updateTechnologicalProcess,
  exportFindClaimMapList,
  exportReceivingInformation
} from "@/api/modules/workstation";

export default {
  components: {
    vueQr,
  },
  props: {},
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      query: {
        areaCode: "",
        businessStatus: "",
        courierNumber: "",
        pageIndex: 1,
        pageSize: 10,
        search: "",
        searchTwo: "",
        unitName: "",
      },
      bodyIndustryStr: [],
      total: 0,
      list: [],
      tableData: [],
      regionList: [
        { areaCode: "320500", areaName: "苏州市", parentCode: "320000" },
        { areaCode: "320505", areaName: "高新区", parentCode: "320500" },
        { areaCode: "320506", areaName: "吴中区", parentCode: "320500" },
        { areaCode: "320507", areaName: "相城区", parentCode: "320500" },
        { areaCode: "320508", areaName: "姑苏区", parentCode: "320500" },
        { areaCode: "320509", areaName: "工业园区", parentCode: "320500" },
        { areaCode: "320581", areaName: "常熟市", parentCode: "320500" },
        { areaCode: "320582", areaName: "张家港市", parentCode: "320500" },
        { areaCode: "320583", areaName: "昆山市", parentCode: "320500" },
        { areaCode: "320584", areaName: "吴江区", parentCode: "320500" },
        { areaCode: "320585", areaName: "太仓市", parentCode: "320500" },
        { areaCode: "320592", areaName: "张家港保税区", parentCode: "320500" },
      ],
      dialogVisible: false,
      bodyIndustryOptions,
      sendData: {
        businessStatus: 0,
        courierNumber: "",
        deliverGoodsDate: this.$moment().format("YYYY-MM-DD"),
        id: "",
        operatingUnit: "",
        operator: "",
        reasonRejection: "",
        updateName: sessionStorage.getItem("logname"),
        updateDepartment: sessionStorage.getItem("unitName"),
      },
      data: {},
      rules: {
        reasonRejection: [
          {
            trigger: "blue",
            required: true,
            message: "请输入拒绝原因",
          },
        ],
        courierNumber: [
          {
            trigger: "blue",
            required: true,
            message: "请输入快递单号",
          },
        ],
      },
      // dialogVisible:false,
    };
  },
  computed: {
    active() {
      return this.data.courierNumber
        ? Number(this.data.businessStatus) + 2
        : this.data.businessStatus + 1;
    },
  },
  created() {
    if (this.$route.query.code) {
      this.query.areaCode = this.$route.query.code;
    } else {
      this.query.areaCode = "320500";
    }
    // this.findListByParentCode();
    this.getList();
  },
  mounted() {},
  methods: {
    addItem() {
      this.$router.push("/foodSafety/policy/addPolicy");
    },
    getList() {
      FindClaimMapList(this.query)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.totalCount;
        })
        .catch((res) => {
          console.log(res);
        });
    },
    exportList() {
      exportFindClaimMapList(this.query).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "导出" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    exportList1() {
      exportReceivingInformation(this.query).then((res) => {
        var blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "导出" + new Date().getTime() + ".xlsx"; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },




    edit(e) {
      this.$router.push(`/foodSafety/policy/addPolicy?id=${e.id}`);
    },
    view(e, index) {
      this.data = e;
      this.sendData.businessStatus = index;
      this.sendData.id = e.id;
      this.dialogVisible = true;
      // sessionStorage.setItem("router", "/performance");
      // sessionStorage.setItem("id", e.id);
      // sessionStorage.setItem("newLicenseNo", e.newLicenseNo);
      // this.$router.push({ path: "/enterprise/home" });
    },
    pagination(e) {
      console.log(e);
    },
    deleteById(e) {
      this.$confirm("确定删除这一项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((red) => {
          this.$http
            .deleteByIdPolicy({
              params: {
                id: e.id,
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.pageIndex = 1;
                this.findFoodSafetyClassList();
                this.$success(res.msg);
              } else {
                this.$error(res.msg);
              }
            })
            .catch((res) => {
              console.log(res);
            });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    pickerChage(e) {
      if (e) {
        this.query.startDate = e[0];
        this.query.endDate = e[1];
      } else {
        this.query.startDate = "";
        this.query.endDate = "";
      }
    },
    onView(e) {
      this.url = e.id;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },

    onChange(e) {
      if (e.length == 2) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = e[1];
      } else if (e.length == 1) {
        this.query.bodyIndustry = e[0];
        this.query.bodyIndustryRemarks = "";
      } else {
        this.query.bodyIndustry = "";
        this.query.bodyIndustryRemarks = "";
        this.bodyIndustryStr = "";
      }
    },
    acceptance() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let data = await updateTechnologicalProcess(this.sendData);
          this.$success(data.msg);
          this.dialogVisible = false;
          this.getList();
        }
      });
    },
  
    // findListByParentCode() {
    //   this.$http
    //     .findListByParentCode({
    //       parentCode: this.query.areaCode,
    //     })
    //     .then((res) => {
    //       this.regionList = res.data;
    //     });
    // },
  },
};
</script>

<style scoped lang="scss">
.classroom {
  padding: 20px;
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>


